<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Binding to XML</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.model.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <script src="../../source/js/kendo.data.xml.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Binding to XML</div>
        <!-- description -->
        <div id="example" class="k-content">

            <ul id="books"></ul>

            <script id="template" type="text/x-kendo-template">
                <li class="book">
                    <a href="#= url #"><img src="../content/datasource/xml-data/#= cover #" /></a>
                    <h3>#= title #</h3>
                    by #= author #
                </li>
            </script>

            <script>
                $(document).ready(function() {
                    function onChage() {
                        $("#books").html(kendo.render(template, this.view()));
                    }

                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            // specify the XML file to read. The same as read: { url: "books.xml" }
                            read: "books.xml"
                        },
                        schema: {
                            // specify the the schema is XML
                            type: "xml",
                            // the XML element which represents a single data record
                            data: "/books/book",
                            // define the model - the object which will represent a single data record
                            model: {
                                // configure the fields of the object
                                fields: {
                                    // the "title" field is mapped to the text of the "title" XML element
                                    title: "title/text()",
                                    // the "author" field is mapped to the text of the "author" XML element
                                    author: "author/text()",
                                    // the "url" field is mapped to the text of the "url" XML element
                                    url: "url/text()",
                                    // the "cover" field is mapped to the "id" attribute of the "book" XML element
                                    cover: "@cover"
                                }
                            }
                        },
                        change: onChage
                    });

                    dataSource.read();
                });
            </script>

            <style scoped>
                #books {
                    list-style-type: none;
                    float:left;
                    width: 65%;
                    margin: 0;
                    padding: 0;
                }

                .book {
                    float:left;
                    width: 32%;
                    height:240px;
                    text-align: center;
                    margin-bottom: 2em;
                }

                .book h3 {
                    margin-bottom: 0;
                }

                .book a {
                    display: inline-block;
                    max-width: 128px;
                    border: 1px solid #b6b6b6;
                    box-shadow: 0 0 4px #ccf;
                }

                .book a:hover {
                    box-shadow: 0 0 6px #99f;
                }

                .book img {
                    vertical-align: middle;
                    border: 0;
                    max-width: 100%;
                }

                .configuration {
                    width: 32%;
                }

            </style>

            <div class="configuration">
                <span class="infoHead">Information</span>
                This example is bound to XML in the following format:

                <div class="code-sample">
                    <h4 class="code-title">XML Format</h4>
                    <pre class="prettyprint"><code>&lt;book cover="javascript-the-good-parts.png"&gt;
    &lt;title&gt;JavaScript: The Good Parts&lt;/title&gt;
    &lt;author&gt;Douglas Crockford&lt;/author&gt;
    &lt;url&gt;http://www.amazon.com/&hellip;&lt;/url&gt;
&lt;/book&gt;</code></pre>
                </div>

                <a href="books.xml">see the full XML</a>
                <p>
                    <strong>Note:</strong>
                    Security restrictions in Chrome prevent this
                    example from working when the page is
                    loaded from the file system (via file:// protocol).
                </p>
            </div>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


